<template>
  <div class="box">
    <div class="detailsCon">
      <div class="details_logo_name">
        <p>
          <img
            style="width:30px;height:30px;border-radius:50%;"
            :src="detailsList.brandLogo"
            alt=""
          />
        </p>
        <span>{{ detailsList.couponName }}</span>
      </div>
      <div class="details_msg">
        <ul>
          <li>
            <p class="spot"></p>
            优惠券类型 ：<span class="typeface_color1">{{
              detailsList.couponType
            }}</span>
          </li>
          <li>
            <p class="spot"></p>
            优惠力度 ：<span
              class="typeface_color2"
              v-if="detailsList.couponType == '直抵券'"
              >{{
                detailsList.couponValues && detailsList.couponValues.length > 0
                  ? detailsList.couponValues["0"]
                  : 0
              }}</span
            >
            <span
              class="typeface_color2"
              v-if="detailsList.couponType == '折扣券'"
              >{{
                detailsList.couponValues && detailsList.couponValues.length > 0
                  ? detailsList.couponValues["0"]
                  : 0
              }}折</span
            >
            <span
              class="typeface_color2"
              v-if="detailsList.couponType == '满减券'"
              >满{{
                detailsList.couponValues && detailsList.couponValues.length > 0
                  ? detailsList.couponValues["0"]
                  : 0
              }}
              <span
                >减{{
                  detailsList.couponValues &&
                  detailsList.couponValues.length > 0
                    ? detailsList.couponValues["1"]
                    : 0
                }}</span
              ></span
            >
            <span
              class="typeface_color2"
              v-if="detailsList.couponType == '兑换券'"
              >{{
                detailsList.couponValues && detailsList.couponValues.length > 0
                  ? detailsList.couponValues["0"]
                  : 0
              }}</span
            >
          </li>
        </ul>
        <ul>
          <li>
            <p class="spot"></p>
            品牌名称 ：<span>{{ detailsList.brandName }}</span>
          </li>
          <li>
            <p class="spot"></p>
            所属商户 ：<span>{{ detailsList.merchantName }}</span>
          </li>
        </ul>
        <ul>
          <li>
            <p class="spot"></p>
            有效期 ：<span>{{ detailsList.failureTime | filterTime }}之前</span>
          </li>
          <li>
            <p class="spot"></p>
            领取限制 ：<span>每人限领 {{detailsList.receiveCount}} 张</span>
          </li>
        </ul>
      </div>
      <div class="details_explain">
        <ul>
          <li>
            <p class="spot m-t" ></p>
            优惠券说明 ：<span class="textStyle" v-html="detailsList.couponRemark"></span>
          </li>
          <li>
            <p class="spot m-t"></p>
            使用需知 ：<span class=" textStyle" v-html="detailsList.useRemark"></span>
          </li>
        </ul>
      </div>
      <div class="details_available">
        <ul>
          <li>
            <p class="spot m-t text-color"></p>
            可用库存 ：<span
              >{{
                detailsList.couponResult == null
                  ? "0"
                  : detailsList.couponResult.stockNum
              }}
              张</span
            >
          </li>
        </ul>
      </div>

      <button class="usebtn" @click="applyUse(couponId)">申请使用</button>
    </div>
    <!-- 申请使用弹框 -->
    <coupon-application
      :dialogFormVisible="dialogFormVisible"
      @cancel="cancel"
      @sureApply="sureApply"
      :couponId="couponId"
      @close="close"
    ></coupon-application>
  </div>
</template>

<script>
import { getCouponInfo, getApply } from "../../service/api/index";
import { parseTime } from "@/utils/index";
import couponApplication from "../../views/platformTicket/components/couponApplication";
export default {
  data() {
    return {
      couponId: "",
      detailsList: [],
      dialogFormVisible: false
    };
  },
  created() {
    this.couponId = this.$route.query.couponId || "";
    console.log(this.couponId);
    this.getCouponDetailInit();
  },
  filters: {
    filterTime(val) {
      return parseTime(val, "{y}-{m}-{d}");
    }
  },
  components: {
    couponApplication
  },
  methods: {
    async applyUse(couponId) {
      console.log(couponId);
      this.dialogFormVisible = true;
      //  console.log(this.dialogFormVisible)
      // this.$router.push("./couponDetailsPass");
    },
    cancel(val) {
      this.dialogFormVisible = val;
    },
    close(val) {
      this.dialogFormVisible = val;
    },
    async getCouponDetailInit() {
      const res = await getCouponInfo({
        couponId: this.couponId || ""
      });
      this.detailsList = res.data;
    },
    sureApply(val) {
      this.dialogFormVisible = val;
      this.getCouponDetailInit();
    }
  }
};
</script>

<style lang="scss" scoped>
/deep/.textStyle p{
  display: block;
  margin: 0;
  padding: 0;
}
.box{
  min-height: 100vh;
}
.usebtn {
  width: 100px;
  height: 32px;
  line-height: 32px;
  background-color: #3b86ff;
  color: #fff;
  border: 0;
  margin-left: 87px;
  border-radius: 4px;
}
.details_available ul li {
  font-size: 14px;
  margin-top: 20px;
  margin-bottom: 40px;
}
.text-color {
  background-color: #3b86ff !important;
}
.details_available {
  margin-left: 87px;
}
.m-l {
  margin-left: 15px;
}
.m-t {
  margin-top: 8px !important;
}
.details_explain span {
  width: 1300px;
  height: 60px;
  display: inline-block;
  font-size: 14px;
}
.details_explain ul li {
  display: flex;
  margin: 20px 0;
  font-size: 14px;
}
.details_explain {
  height: 182px;
  margin-left: 87px;
  border-bottom: 1px solid #e9e9f0;
}
.typeface_color2 {
  color: #ff7065;
}
.typeface_color1 {
  color: #ffbe00;
}
.spot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #a5a4bf;
  margin: 2px 5px;
}
.details_msg ul li {
  font-size: 14px;
  height: 40px;
}
.details_msg ul {
  width: 400px;
  height: 57px;
  line-height: 57px;
  margin-right: 100px;
}
.details_msg {
  display: flex;
  border-bottom: 1px solid #e9e9f0;
  height: 107px;
  margin-left: 87px;
}
.details_logo_name {
  display: flex;
  height: 30px;
  line-height: 30px;
  border-bottom: 1px solid #e9e9f0;
  padding-bottom: 15px;
}
.details_logo_name span {  
  font-size: 18px;
  font-family: Source Han Sans CN;
  font-weight: 500;
  color: #43425d;
}
.details_logo_name p {
  width: 30px;
  height: 30px;
  /* border: 1px solid #000; */
  border-radius: 50%;
  margin-right: 10px;  
}
.detailsCon {
  padding: 19px 20px 0 20px;
}

* {
  margin: 0;
  padding: 0;
}
</style>
